import Message from './Message.vue'
import Vue from 'vue'

const newInstance = (props = {}) => {
  const instance = new Vue({
    name: 'MessageWrapper',
    functional: true,
    render(h) {
      return h(Message, {
        props: props,
      })
    },
  })

  const component = instance.$mount()
  document.body.appendChild(component.$el)

  const alert = instance.$children[0]

  return {
    add(noticeProps) {
      alert.add(noticeProps)
    },
    remove(name) {
      alert.remove(name)
    },
  }
}

let messageInstance

function getMessageInstance() {
  messageInstance = messageInstance || newInstance()
  return messageInstance
}

function notice({ duration = 1.5, content = '' }) {
  const instance = getMessageInstance()

  instance.add({
    content: content,
    duration: duration,
  })
}

export default {
  info(options) {
    return notice(options)
  },
}
